<template>
	<div id="app" class="app" :class="[{'isDay':isDay}]">
    <transition name="router-fade" made="out-in">
      <keep-alive>
        <router-view v-if="$route.meta.keepalive"></router-view>
      </keep-alive>
    </transition>
    <transition name="router-fade" made="out-in">
      <keep-alive>
        <router-view v-if="!$route.meta.keepalive"></router-view>
      </keep-alive>
    </transition>
<!--        <router-view v-if="isRouterAlive"></router-view>-->
    </div>
</template>

<script>
export default {
	name: "App",
	provide() {
		return {
			reload: this.reload
		};
	},
  components:{
  },
	data() {
		return {
			isRouterAlive: true
		};
	},
	methods: {
        // 重载页面 适合添加数据或者路由id改变
		reload() {
			this.isRouterAlive = false;
			this.$nextTick(()=>{
                this.isRouterAlive = true;
            });
		}
	},
  computed: {

    isDay: {
      get() {
        return this.$store.state.isDay;
      },
      set(val) {
        this.$store.state.isDay = val;
      },
    },
  },
};
</script>

<style >

  body,html,#app {
    width: 100%;
    height: 100%;

  }

  .el-table::before {
    z-index: inherit!important;

  }
  .el-table--scrollable-y .el-table__body-wrapper {
    overflow-y: hidden;
  }
  .el-table--scrollable-y .el-table__body-wrapper:hover {
    overflow-y: auto;
  }
  .el-scrollbar__wrap{overflow-x:hidden;overflow-y:hidden;}
  .el-table /deep/ .el-table__empty-block {
    background-color: #181A23;
    border: none;
  }

  .el-table /deep/ .el-table__empty-block .el-table__empty-text {
    color: #fff;
    border: none;
  }

  .el-scrollbar {
    height: 100%;
  }
  .el-scrollbar__wrap {
    overflow: scroll;
    width: 110%;
    height: 120%;
  }

  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #eee;
    border-radius: 3px;
  }
  .app {
    background-color:#000;
  }

  .isDay {
    background-color:#F7F8F9;
  }
  .router-fade-enter-active, .router-fade-leave-active {
    transition: opacity .3s;
  }
  .router-fade-enter, .router-fade-leave-active {
    opacity: 0;
  }
</style>
